<!-- 维护 -->
<template>
  <div class="page-flex paddingR20 paddingB20" style="height: 93vh; padding-top: 0">
    <el-tabs v-model="data.query.game_type" type="card" class="demo-tabs" @tab-change="getSearchList">
      <el-tab-pane v-for="item in GAMETYPE" :label="item.label + '维护'" :name="item.value" />
    </el-tabs>
    <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
      @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true"
      @reset="onHideDetails">
      <template #form>
        <Operator ref="OperatorRef" @query="queryItem" />
        <el-form-item label="游戏：">
          <el-select v-model="data.query.game_id" placeholder="请选择" filterable>
            <el-option label="全部" :value="-1" />
            <el-option v-show="item.type == data.query.game_type" v-for="item in indexStore.gameArray" :key="item.value"
              :label="'【' + item.value + '】' + item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
      <template #button></template>
      <template #table>
        <template v-for="(item, index) in data.fields" :key="index">
          <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
            show-overflow-tooltip>
            <template v-if="item.prop == 'agent_id_name'" #default="scope">
              {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
            </template>
            <template v-if="item.prop == 'game_name'" #default="scope">
              <div class="gameIcon">
                <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
                {{ selectToLabel(indexStore.gameArray, scope.row.game_id) }}
              </div>
            </template>
            <template v-if="item.prop == 'game_type'" #default="scope">
              <el-tag>{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
            </template>
            <template v-if="item.prop == 'status'" #default="scope">
              <el-tag :type="scope.row.status ? 'primary' : 'danger'">
                {{ selectToLabel(DEMOPLAY, scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <!-- <el-switch v-model="scope.row.status" active-text="开启" inactive-text="关闭" :active-value="1"
              :inactive-value="0" @change="() => handleChange(scope.row)" /> -->
            <el-button :type="scope.row.status ? 'danger' : 'success'" v-permiss="'/system/changeManager'" size="small"
              @click="handleChange(scope.row)">
              {{ scope.row.status ? '关闭' : '开启' }}
            </el-button>
            <!-- <el-button type="primary" size="small" @click="handleOpertion(false, scope.row)"> 设定 </el-button> -->
          </template>
        </el-table-column>
      </template>
    </SearchTable>

    <!-- 变更表头弹框 -->
    <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
      @resetData="resetData"></tableHeader>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import { selectToLabel } from '@/utils/index'
import { GAMETYPE, DEMOPLAY, GAMEICON } from '@/config/eunm'
import { getGame, editGame } from '@/api/game'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    game_type: 1,
    agent_id: -1,
    operated_id: -1,
    game_id: -1,
    currency_id: -1
  },
  list: [],
  total: 0,
  fields: [
    { label: '商户ID', prop: 'agent_id', width: '', visible: true },
    { label: '商户名称', prop: 'agent_id_name', width: '', visible: true },
    { label: '游戏编号', prop: 'game_id', width: '', visible: true },
    { label: '游戏名称', prop: 'game_name', width: '', visible: true },
    { label: '游戏类型', prop: 'game_type', width: '150', visible: true },
    { label: '状态', prop: 'status', width: '', visible: true },
  ],
  dialogVisible: false, // 表头弹框
  // opertionDialog: false, // 批量操作
  // isOpt: false, // 是否是批量操作
  addQuery: {
    test_account: '', // 测试账号
    status: 1, // 状态 
    game_ids: <Array<number>>[], // 游戏id
    agent_ids: [] as number[], // 商户id 
  },
  // rules: {
  //   game_ids: [
  //     {
  //       type: 'array',
  //       required: true,
  //       message: '请选择',
  //       trigger: 'change'
  //     }
  //   ],
  //   agent_ids: [
  //     {
  //       type: 'array',
  //       required: true,
  //       message: '请选择',
  //       trigger: 'change'
  //     }
  //   ]
  // }
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  let res = await getGame(data.query)
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
}

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

const handleChange = (row: { test_account: string; status: number; game_id: number; agent_id: number }) => {
  let msg = row.status == 1 ? '确认是否关闭游戏？' : '确认是否开启游戏？',
    dataRow = JSON.parse(JSON.stringify(row));
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    dataRow.status = dataRow.status ? 0 : 1
    await editGame(dataRow)
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
    getSearchList()
  }).catch(() => { })
}


// const addQuery = ref<FormInstance>()

// 批量操作
// const handleOpertion = (ispl: boolean, row?: { test_account: string; status: number; game_id: number; agent_id: number }) => {
//   data.isOpt = ispl; 
//   data.opertionDialog = true
//   nextTick(() => {
//   if (ispl) {
//     data.addQuery = {
//       test_account: '',
//       status: 1,
//       game_ids: <Array<number>>[],
//       agent_ids: [] as number[]
//     }
//     addQuery.value!.resetFields()
//   } else {
//     console.log(row)
//     data.addQuery = {
//       test_account: row?.test_account ?? '',
//       status: row?.status ?? 1,
//       game_ids: [row?.game_id ?? 0],
//       agent_ids: [row?.agent_id ?? 0] 
//     }
//   }
// })


// }

// 选择商户
// const changeAgent = (val: number[]) => {
//   // if (val.includes(-1)) {
//   //   data.addQuery.agent_id = indexStore.agentArray.map((item) => item.value).concat(...[-1])
//   // }
//   console.log(val)
// }

// 保存
// const save = async () => {
//   if (!addQuery.value) return
//   await addQuery.value.validate(async (valid, fields) => {
//     if (valid) {
//       await editGame(data.addQuery)
//       onHideDetails(true)
//       ElMessage({
//         message: '操作成功',
//         type: 'success'
//       })
//     }
//   })
// }

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = () => {
  data.dialogVisible = false
  data.query = {
    page: 1,
    size: 50,
    game_type: 1,
    agent_id: -1,
    operated_id: -1,
    game_id: -1,
    currency_id: -1
  }
  OperatorRef.value.onHideDetails()
  getSearchList()
}
</script>

<style scoped lang="scss">
.demo-tabs {
  padding-right: 20px;
}

.page-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
